<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <jsp:useBean id="formHandler" class="com.burger.counter.jspValidation.PickUpDateValidation" scope="request" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script language="javascript" type="text/javascript" src="datetimepicker.js">
</script>
<head>

</head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

</head>
<body>
<script language="JavaScript" type="text/javascript">

//Written by Tan Ling wee
var imagePath='timePickerImages/';

var ie=document.all;
var dom=document.getElementById;
var ns4=document.layers;
var bShow=false;
var textCtl;

function setTimePicker(t) {
  textCtl.value=t;
  closeTimePicker();
}

function refreshTimePicker(mode) {
  
  if (mode==0)
    { 
      suffix="am"; 
    }
  else
    { 
      suffix="pm"; 
    }

  sHTML = "<table><tr><td><table cellpadding=3 cellspacing=0 bgcolor='#f0f0f0'>";
  for (i=0;i<=11;i++) {

    sHTML+="<tr align=right style='font-family:verdana;font-size:9px;color:#000000;'>";

    if (i==0) {
      hr = 12;
    }
    else {
      hr=i;
    }  

    for (j=0;j<4;j++) {
      sHTML+="<td width=57 style='cursor:hand' onmouseover='this.style.backgroundColor=\"#66CCFF\"' onmouseout='this.style.backgroundColor=\"\"' onclick='setTimePicker(\""+ hr + ":" + padZero(j*15) + " " + suffix + "\")'><a style='text-decoration:none;color:#000000' href='javascript:setTimePicker(\""+ hr + ":" + padZero(j*15) + " " + suffix + "\")'>" + hr + ":"+padZero(j*15) + "<font color=\"#808080\">" + suffix + "</font></a></td>";
    }

    sHTML+="</tr>";
  }
  sHTML += "</table></td></tr></table>";
  document.getElementById("timePickerContent").innerHTML = sHTML;
}

if (dom){
  document.write ("<div id='timepicker' style='z-index:+999;position:absolute;visibility:hidden;'><table style='border-width:3px;border-style:solid;border-color:#0033AA' bgcolor='#ffffff' cellpadding=0><tr bgcolor='#0033AA'><td><table cellpadding=0 cellspacing=0 width='100%' background='" + imagePath + "titleback.gif'><tr valign=bottom height=21><td style='font-family:verdana;font-size:11px;color:#ffffff;padding:3px' valign=center><B>&nbsp;&nbsp;Select a Time&nbsp;&nbsp;</B></td><td><img id='iconAM' src='" + imagePath + "am1.gif' onclick='document.getElementById(\"iconAM\").src=\"" + imagePath + "am1.gif\";document.getElementById(\"iconPM\").src=\"" + imagePath + "pm2.gif\";refreshTimePicker(0)' style='cursor:hand'></td><td><img id='iconPM' src='" + imagePath + "pm2.gif' onclick='document.getElementById(\"iconAM\").src=\"" + imagePath + "am2.gif\";document.getElementById(\"iconPM\").src=\"" + imagePath + "pm1.gif\";refreshTimePicker(1)' style='cursor:hand'></td><td align=right valign=center>&nbsp;<img onclick='closeTimePicker()' src='" + imagePath + "close.gif'  STYLE='cursor:hand'>&nbsp;</td></tr></table></td></tr><tr><td colspan=2><span id='timePickerContent'></span></td></tr></table></div>");
  refreshTimePicker(0);
}

var crossobj=(dom)?document.getElementById("timepicker").style : ie? document.all.timepicker : document.timepicker;
var currentCtl

function selectTime(ctl,ctl2) {
  var leftpos=0
  var toppos=0

  textCtl=ctl2;
  currentCtl = ctl
  currentCtl.src=imagePath + "timepicker2.gif";

  aTag = ctl
  do {
    aTag = aTag.offsetParent;
    leftpos  += aTag.offsetLeft;
    toppos += aTag.offsetTop;
  } while(aTag.tagName!="BODY");
  crossobj.left =  ctl.offsetLeft  + leftpos 
  crossobj.top = ctl.offsetTop +  toppos + ctl.offsetHeight +  2 
  crossobj.visibility=(dom||ie)? "visible" : "show"
  hideElement( 'SELECT', document.getElementById("calendar") );
  hideElement( 'APPLET', document.getElementById("calendar") );      
  bShow = true;
}

// hides <select> and <applet> objects (for IE only)
function hideElement( elmID, overDiv ){
  if( ie ){
    for( i = 0; i < document.all.tags( elmID ).length; i++ ){
      obj = document.all.tags( elmID )[i];
      if( !obj || !obj.offsetParent ){
          continue;
      }
        // Find the element's offsetTop and offsetLeft relative to the BODY tag.
        objLeft   = obj.offsetLeft;
        objTop    = obj.offsetTop;
        objParent = obj.offsetParent;
        while( objParent.tagName.toUpperCase() != "BODY" )
        {
        objLeft  += objParent.offsetLeft;
        objTop   += objParent.offsetTop;
        objParent = objParent.offsetParent;
        }
        objHeight = obj.offsetHeight;
        objWidth = obj.offsetWidth;
        if(( overDiv.offsetLeft + overDiv.offsetWidth ) <= objLeft );
        else if(( overDiv.offsetTop + overDiv.offsetHeight ) <= objTop );
        else if( overDiv.offsetTop >= ( objTop + objHeight + obj.height ));
        else if( overDiv.offsetLeft >= ( objLeft + objWidth ));
        else
        {
        obj.style.visibility = "hidden";
        }
    }
  }
}
   
//unhides <select> and <applet> objects (for IE only)
function showElement( elmID ){
  if( ie ){
    for( i = 0; i < document.all.tags( elmID ).length; i++ ){
      obj = document.all.tags( elmID )[i];
      if( !obj || !obj.offsetParent ){
          continue;
      }
      obj.style.visibility = "";
    }
  }
}

function closeTimePicker() {
  crossobj.visibility="hidden"
  showElement( 'SELECT' );
  showElement( 'APPLET' );
  currentCtl.src=imagePath + "timepicker.gif"
}

document.onkeypress = function hideTimePicker1 () { 
  if (event.keyCode==27){
    if (!bShow){
      closeTimePicker();
    }
  }
}

function isDigit(c) {
  
  return ((c=='0')||(c=='1')||(c=='2')||(c=='3')||(c=='4')||(c=='5')||(c=='6')||(c=='7')||(c=='8')||(c=='9'))
}

function isNumeric(n) {
  
  num = parseInt(n,10);

  return !isNaN(num);
}

function padZero(n) {
  v="";
  if (n<10){ 
    return ('0'+n);
  }
  else
  {
    return n;
  }
}

function validateDatePicker(ctl) {

  t=ctl.value.toLowerCase();
  t=t.replace(" ","");
  t=t.replace(".",":");
  t=t.replace("-","");

  if ((isNumeric(t))&&(t.length==4))
  {
    t=t.charAt(0)+t.charAt(1)+":"+t.charAt(2)+t.charAt(3);
  }

  var t=new String(t);
  tl=t.length;

  if (tl==1 ) {
    if (isDigit(t)) {
      ctl.value=t+":00 am";
    }
    else {
      return false;
    }
  }
  else if (tl==2) {
    if (isNumeric(t)) {
      if (parseInt(t,10)<13){
        if (t.charAt(1)!=":") {
          ctl.value= t + ':00 am';
        } 
        else {
          ctl.value= t + '00 am';
        }
      }
      else if (parseInt(t,10)==24) {
        ctl.value= "0:00 am";
      }
      else if (parseInt(t,10)<24) {
        if (t.charAt(1)!=":") {
          ctl.value= (t-12) + ':00 pm';
        } 
        else {
          ctl.value= (t-12) + '00 pm';
        }
      }
      else if (parseInt(t,10)<=60) {
        ctl.value= '0:'+padZero(t)+' am';
      }
      else {
        ctl.value= '1:'+padZero(t%60)+' am';
      }
    }
    else
         {
      if ((t.charAt(0)==":")&&(isDigit(t.charAt(1)))) {
        ctl.value = "0:" + padZero(parseInt(t.charAt(1),10)) + " am";
      }
      else {
        return false;
      }
    }
  }
  else if (tl>=3) {

    var arr = t.split(":");
    if (t.indexOf(":") > 0)
    {
      hr=parseInt(arr[0],10);
      mn=parseInt(arr[1],10);

      if (t.indexOf("pm")>0) {
        mode="pm";
      }
      else {
        mode="am";
      }

      if (isNaN(hr)) {
        hr=0;
      } else {
        if (hr>24) {
          return false;
        }
        else if (hr==24) {
          mode="am";
          hr=0;
        }
        else if (hr>12) {
          mode="pm";
          hr-=12;
        }
      }
    
      if (isNaN(mn)) {
        mn=0;
      }
      else {
        if (mn>60) {
          mn=mn%60;
          hr+=1;
        }
      }
    } else {

      hr=parseInt(arr[0],10);

      if (isNaN(hr)) {
        hr=0;
      } else {
        if (hr>24) {
          return false;
        }
        else if (hr==24) {
          mode="am";
          hr=0;
        }
        else if (hr>12) {
          mode="pm";
          hr-=12;
        }
      }

      mn = 0;
    }
    
    if (hr==24) {
      hr=0;
      mode="am";
    }
    ctl.value=hr+":"+padZero(mn)+" "+mode;
  }
}

</SCRIPT>

<link rel="stylesheet" href="default.css" type="text/css"></link>
	<%@ include file="header.jsp"%>
	<form name="PickUpTime" method="post" action="PickUpTimeRedirect.jsp">
		<div class="inputColumn" id="pickUpTime"
			style="text-align: center; border: thin; margin: auto;">
			<table border="1">
			<tr>
			<td  colspan="2" valign=top align="left" style="font-family: Comic Sans MS;">
				<b>Pick Up Date<sup style="color: red">*</sup></b> 
			<input id="dateText" name="pickUpDate" type="text" readonly="readonly" 
												 size="25" style="background-color:#eeeeee">
						<a href="javascript:NewCal('dateText','MMDDYYYY')">
						<img src="image/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
			<br>
				<label style="size: 25; color: red"><%=formHandler.getErrorMsg("dateText")%></label>
			</td>
			</tr>
			<tr valign=center>
      <td><input id='timepicker1' name="pickUpTime" type='text' value='12:00 pm' size=8 maxlength=8 ONBLUR="validateDatePicker(this)"></td>
      <td><IMG SRC="timePickerImages/timepicker.gif" BORDER="0" ALT="Pick a Time!" ONCLICK="selectTime(this,timepicker1)" STYLE="cursor:hand"></td>
    </tr>
			
			
			
			<tr>
				<td align="right" colspan="2"><INPUT TYPE="submit"
						VALUE="ContinueCheckOut" name="continueCheckOut"></td>
				</tr>
			</table>
		</div>
	</form>
		
</body>
</html>